import React,{Component} from 'react'
import Footer from './components/Footer/Footer'
import Header from './components/Header/Header'
import List from './components/List/List'
import './App.css'

export default class App extends Component{

  //初始化状态
  state = {todos:[
    {id:'001', name:'吃饭', done:true},
    {id:'002', name:'睡觉', done:false}
  ]}

  //用于添加一个todo,接收的是一个todo对象
  addTodo = (todoObj)=>{
    //获取原数据源
    const {todos} = this.state
    const newTodos = [todoObj,...todos]   //todoObj放前方就是列表中的倒叙
    this.setState({todos:newTodos})
  }

  //修改勾选框，更新state
  changeCheck = (id,done)=>{
    const {todos} = this.state
    //遍历匹配，再处理数据
    const newTodos = todos.map((todoObj)=>{
      if(todoObj.id === id) return {...todoObj,done}   //{...todos,done}:原本是done:done(简写)，todos对象里面有done属性，所以可以看作覆盖
      else return todoObj
    })
    //更新state
    this.setState({todos:newTodos})
  } 

  //用于删除一个todo对象
  deleteTodo = (id)=>{
    const {todos} = this.state
    //删除指定id的todo对象,filter过滤功能
    const newTodos = todos.filter((todoObj)=>{
      return todoObj.id !== id   //id不一样的留下，相同的过滤，相当于删除
    })
    //更新
    this.setState({todos:newTodos})
  }

  //全选框设置
  checkAllTodo = (done)=>{
    const {todos} = this.state
    const newTodos = todos.map((todoObj)=>{
      return {...todoObj,done}
    })
    this.setState({todos:newTodos})
  }

  //清楚所以已完成的todo
  clearAll = ()=>{
    const {todos} = this.state
    const newTodos = todos.filter((todoObj)=>{
      return !todoObj.done
    })
    this.setState({todos:newTodos})
  }

  render(){
    const {todos} = this.state

    return (
      <div className="todo-container">
        <div className="todo-wrap">
          <Header addTodo={this.addTodo}/>
          <List todos={todos} changeCheck={this.changeCheck} deleteTodo={this.deleteTodo}/>
          <Footer todos={todos} checkAllTodo={this.checkAllTodo} clearAll={this.clearAll}/>
        </div>
      </div>
    )
  }
}